/* eslint-disable prettier/prettier */
import React, { useMemo } from 'react';
import CircleProgressPicker from './component/rjs';
import { IProps } from './props';
import { useStdPx2Adapt } from '@/utils';
import { View } from 'ray';
import  styles from './index.module.less';
export default function RectColor(props: IProps) {
  const radius = useStdPx2Adapt(props.radius);
  const innerRingRadius = useStdPx2Adapt(props.innerRingRadius);
  const onTouchStart = e => {
    const { detail } = e;
    const temp = Math.floor(detail);
    props.onTouchStart && props.onTouchStart(temp);
  };
  const onTouchMove = e => {
    const { detail } = e;
    const temp = Math.floor(detail);
    props.onTouchMove && props.onTouchMove(temp);
  };
  const onTouchEnd = e => {
    const { detail } = e;
    const temp = Math.floor(detail);
    props.onTouchEnd && props.onTouchEnd(temp);
  };
  const prefixCls = 'ray-circle-progress';
  const {
    className = '',
        style = {},
        renderInnerCircle = null,
  } =props;
    const canvasId = useMemo(() => {
    return `canvasId_${String(+new Date()).slice(-3)}_${String(Math.random()).slice(-3)}`;
  }, []);

  return (
   <View className={styles['ray-circle-progress']} >

      <CircleProgressPicker
        radius={radius}
        colorType={props.colorType}
        hideThumb={props.hideThumb}
        innerRingRadius={innerRingRadius}
        value={props.value}
        canvasId={canvasId}
        bindstart={onTouchStart}
        bindmove={onTouchMove}
        bindend={onTouchEnd}
      />
      {!!renderInnerCircle && (
       <View className={styles[`ray-circle-progress__inner`]}>{renderInnerCircle && renderInnerCircle()}</View>
    
      )}
    </View>
  );
}
